<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>show</title>
    <link rel="stylesheet" href="../css/show.css">
    <link rel="stylesheet" href="../图标/back/iconfont.css">
</head>

<body>
    <div class="back">
        <a href="./main.html"><span class="iconfont icon-fanhui"></span></a>
    </div>

    <div class="card">
        <div class="top-section">
            <img src="../images/product/01.jpg" alt="" id="image-container">
            <div class="nav">
                <img src="../images/show/1.jpg" alt="" onclick="change_img(this)">
                <img src="../images/show/2.jpg" alt="" onclick="change_img(this)">
                <img src="../images/show/3.jpg" alt="" onclick="change_img(this)">
            </div>
            <div class="price">$7.99</div>
        </div>
        <div class="products-info">
            <div class="name">辣椒</div>
            <div class="dis">有机生产，不含农药</div>
            <a href="./shop.html" class="btn">去添加到购物车</a>
        </div>
    </div>


    <script type="text/javascript">
        var container = document.getElementById("image-container");
        function change_img(image) {
            container.src = image.src;
        }
    </script>

</body>

</html>